<template>
  <van-overlay :show="popShow" class-name="result_overlay">
    <div class="result_wrapper" @click.stop>
      <!-- <div v-if="state.time === 0" class="content">
        <img class="answer_error_icon" src="https://jwc-static.jdwxk.com/imgs/activities/answer_error.png" alt="" srcset="" />
        <span class="text">很遗憾，超时，将无法获取积分， 请再接再厉！</span>
        <van-button type="default" block class="readOver_btn" @click="close"> 确认 </van-button>
      </div> -->
      <div v-if="result" class="content">
        <!-- <img class="answer_right_icon" src="https://jwc-static.jdwxk.com/imgs/activities/answer_right.png" alt="" srcset=""> -->
        <!-- <div class="answer_right_icon" /> -->
        <img class="answer_right_icon" :src="cardBaseUrl + result.cardPic" alt="">
        <span class="text">{{ result.message }}</span>
        <van-button type="default" block class="readOver_btn" @click="close">
          确认
        </van-button>
      </div>
      <div class="close_btn" @click="close">
        <van-icon class="close_icon" name="cross" color="white" size="30" />
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import { useRouter } from 'vue-router'
import { cardAdd, scoreAdd } from '@/api/activities'
import { useUserStoreWidthOut } from '@/store/modules/user'

const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)

const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)

const router = useRouter()

// const router = useRouter()
// function back() {
//   router.back()
// }
const result = ref(null)
const routerBack = ref(0)

const popShow = ref(false)
async function open(res, back = 0) {
  result.value = res
  routerBack.value = back
  // let res1
  // let res2
  console.log('res', res, back)

  // 加积分加卡片接口
  let activityType = 1
  switch (res.type) {
    case 'collectCard':
      activityType = 4
      break
    case 'treasureHunt':
      activityType = 3
      break
    case 'activity': // 只有拼图会获取卡片，成语不会
      activityType = 2
      break
  }
  // if (res.harvestType.findIndex((item) => {
  //   return item === '积分'
  // }) > -1) {
  const res1 = await scoreAdd({
    phone: userInfo.value.phone,
    // phone: '18638324792',
    projectName: '',
    eventDesc: new Date().toLocaleString(),
    activityType,
    typeDesc: res.typeDesc || null,
    questionld: res.questionld || null,
  })
  // }
  // if (res.harvestType.findIndex((item) => {
  //   return item === '卡片'
  // }) > -1) {
  const res2 = await cardAdd({
    phone: userInfo.value.phone,
    // phone: '18638324792',
    picId: res.cardId,
    source: '扫码',
  })
  // }
  console.log('res2', res2)
  result.value.message = ''
  let message_temp = ''
  // if (res2.code === 201) {
  //   result.value.message = res2.message
  // }
  // if (res1.code === 201) {
  //   result.value.message = res1.message
  // }
  if (res1.code === 200 && res2.code === 201) {
    message_temp = `恭喜您，获得 ${res.point} 积分`
  }
  else if (res1.code === 201 && res2.code === 200) {
    message_temp = `恭喜您，获得 卡片`
  }
  else if (res1.code === 200 && res2.code === 200) {
    message_temp = `恭喜您，获得卡片与 ${res.point} 积分`
  }
  else {
    message_temp = `您已获得该卡片`
  }
  result.value.message = message_temp
  popShow.value = true
}
function close() {
  console.log('close', routerBack.value)

  popShow.value = false
  if (routerBack.value !== 0) {
    router.go(routerBack.value)
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.result_overlay {
  z-index: 999;
  .result_wrapper {
    position: fixed;
    z-index: 11;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .content {
    border: none !important;
    width: 295px;
    height: 303px;
    background: url('https://jwc-static.jdwxk.com/imgs/activities/result_get_new_card_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    // border-radius: 12px;
    // border: 2.5px solid #b67565;
    // background: white;
    position: relative;
    // padding: 36px;
    padding-top: 67px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .answer_right_icon {
      width: 140px;
      height: 130px;
      background-color: white;
    }
    .answer_error_icon {
      width: 140px;
      height: 130px;
      background-color: white;
    }
    .text {
      color: #a95644;
      font-size: 15px;
      line-height: 25.5px;
      font-weight: 700;
      text-align: center;
    }
    .readOver_btn {
      width: 218px;
      height: 34px;
      background: linear-gradient(to right, #bc3333, #d3503e);
      border-radius: 30px;
      color: white;
      font-size: 14px;
      line-height: 34px;
    }
  }
  .close_btn {
    width: 58.5px;
    height: 58.5px;
    border-radius: 58.5px;
    border: 2.5px solid white;
    margin-top: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    .close_icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
